// /* eslint-disable @typescript-eslint/no-explicit-any */
// // import React from 'react'
// import { Button, Modal, Space, Table } from 'antd';
// import { useEffect, useState } from 'react';
// import api from '../../api/request'
// import { Form, Input } from 'antd';
// import useBtns from '../../hooks/useBtns';
// import * as XLSX from 'xlsx'; // 引入xlsx库
// import styles from '../../App.module.css'
// function Index() {
//     const columns = [
//         {
//             title: 'ID',
//             dataIndex: 'id',
//             key: 'id',
//         },
//         {
//             title: '名称',
//             dataIndex: 'shopName',
//             key: 'shopName',
//         },
//         {
//             title: '籍贯',
//             dataIndex: 'shopAddress',
//             key: 'shopAddress',
//         },
//         {
//             title: '简述',
//             key: 'shopDescription',
//             dataIndex: 'shopDescription',
//         },
//         {
//             title: '图片',
//             key: 'shopImage',
//             dataIndex: 'shopImage',
//             render: (text: string) => <img src={text} alt="" style={{ width: '60px' }} />,
//         },
//         {
//             title: '操作',
//             render: (record: any) => (
//                 <Space size="middle">
//                     {dele && <Button onClick={() => del(record.id)}>删除</Button>}
//                     {edit && <Button onClick={() => edi(record)}>编辑</Button>}
//                 </Space>
//             ),
//         },
//     ];
//     const [data, setData] = useState([])
//     const [total, setTotal] = useState()
//     const [page, setPage] = useState(1)
//     const [size, setSize] = useState(10)
//     const [search, setSearch] = useState({
//         searchValue: '',
//         type: ''
//     })
//     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
//     const [isModalOpen, setIsModalOpen] = useState(false);


//     //rbac按钮
//     const dele = useBtns('dele')
//     const edit = useBtns('edit')
//     //渲染
//     const getdata = () => {
//         api.get('/list', {
//             params: {
//                 pageCode: page, pageSize: size, ...search
//             }
//         }).then((res) => {
//             setData(res.data.data)
//             setTotal(res.data.totalCount)
//         })
//     }
//     useEffect(() => {
//         getdata()
//     }, [page, size, search])
//     //监听分页
//     const change = (page: number, size: number) => {
//         setPage(page)
//         setSize(size)
//     }
//     //筛选
//     const onSelectChange = (newSelectedRowKeys: any) => {
//         console.log('selectedRowKeys changed: ', newSelectedRowKeys);
//         setSelectedRowKeys(newSelectedRowKeys);
//     };
//     const rowSelection = {
//         selectedRowKeys,
//         onChange: onSelectChange,
//     };
//     //删除
//     const del = (id: number) => {
//         api.delete('/list', { params: { id } }).then(() => {
//             // alert('成功')
//             getdata()
//         })
//     }
//     //批量删除
//     const alldel = () => {
//         selectedRowKeys && selectedRowKeys.forEach((item) => {
//             del(item)
//         })
//     }
//     //搜索
//     const [form] = Form.useForm()
//     const onFinish = (values: any) => {
//         console.log('Success:', values);
//         setSearch(values)
//     };
//     const onFinishFailed = (errorInfo: any) => {
//         console.log('Failed:', errorInfo);
//     };
//     //弹框表单
//     const [title, setTitle] = useState('')
//     const handleOk = () => {
//         setIsModalOpen(false);
//     };
//     const handleCancel = () => {
//         setIsModalOpen(false);
//     };
//     const addFinish = (values: any) => {
//         if (values.id) {
//             api.post('/list', values)
//             setIsModalOpen(false);
//             getdata()
//         } else {
//             api.put('/list', values)
//             setIsModalOpen(false);
//             getdata()

//         }
//     }
//     //编辑
//     const edi = (record: any) => {
//         setTitle('编辑')
//         setIsModalOpen(true);
//         form.setFieldsValue(record)
//     }
//     //新增
//     const add = () => {
//         setTitle('新增')
//         setIsModalOpen(true);
//         form.resetFields()
//     }

//     //导出数据
//     const exp = () => {
//         const exportData = data.map(
//             ({
//                 id,
//                 shopName,
//                 shopAddress,
//                 shopDescription,
//                 shopImage,
//             }) => ({
//                 ID: id,
//                 名称: shopName,
//                 籍贯: shopAddress,
//                 简述: shopDescription,
//                 图片: shopImage,
//             })
//         );
//         const ws = XLSX.utils.json_to_sheet(exportData);
//         const wb = XLSX.utils.book_new();
//         XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
//         XLSX.writeFile(wb, "商铺信息.xlsx");
//     }
//     const them = localStorage.getItem('them')
//     getdata()
//     useEffect(() => {
//         getdata()
//     }, [page, size, search])

//     return (
//         <div>
//             <Form
//                 name="basic"
//                 layout='inline'
//                 wrapperCol={{ span: 16 }}
//                 style={{ maxWidth: 1000, }}
//                 initialValues={{ remember: true }}
//                 onFinish={onFinish}
//                 onFinishFailed={onFinishFailed}
//                 autoComplete="off"
//             >
//                 <Form.Item label={null}>
//                     <Button type="primary" onClick={alldel} >
//                         批量删除
//                     </Button>
//                 </Form.Item>

//                 <Form.Item
//                     label={<span className='text-white dark:text-black'>关键词</span>}
//                     name="searchValue"
//                 >
//                     <Input />
//                 </Form.Item>
//                 <Form.Item label={null}>
//                     <Button type="primary" htmlType="submit">
//                         搜索
//                     </Button>
//                 </Form.Item>
//                 <Form.Item label={null}>
//                     <Button type="primary" onClick={add} >
//                         新增
//                     </Button>
//                 </Form.Item>
//                 <Form.Item label={null}>
//                     <Button type="primary" onClick={exp} >
//                         导出Excel数据
//                     </Button>
//                 </Form.Item>

//             </Form>
//             {
//                 them === 'light' ? <Table
//                     className={styles.tablebox}
//                     pagination={{
//                         total: total,
//                         showSizeChanger: true,
//                         showQuickJumper: true,
//                         onChange: change,
//                         showTotal: total => <p style={{ color: '#000' }}> 共{total}条记录</p>
//                     }}
//                     rowKey='id'
//                     rowSelection={rowSelection}
//                     columns={columns} dataSource={data} /> : <Table
//                     className={styles.tablebo}
//                     pagination={{
//                         total: total,
//                         showSizeChanger: true,
//                         showQuickJumper: true,
//                         onChange: change,
//                         showTotal: total => <p style={{ color: '#fff' }}> 共{total}条记录</p>
//                     }}
//                     rowKey='id'
//                     rowSelection={rowSelection}
//                     columns={columns} dataSource={data} />
//             }

//             <Modal
//                 title={title}
//                 closable={{ 'aria-label': 'Custom Close Button' }}
//                 open={isModalOpen}
//                 onOk={handleOk}
//                 onCancel={handleCancel}
//                 footer={null}
//             >
//                 < Form
//                     form={form}
//                     name="basic"
//                     labelCol={{ span: 8 }}
//                     wrapperCol={{ span: 16 }}
//                     style={{ maxWidth: 600 }}
//                     onFinish={addFinish}
//                     onFinishFailed={onFinishFailed}
//                     autoComplete="off"
//                 >
//                     <Form.Item style={{ display: 'none' }}
//                         label="id"
//                         name="id"
//                     >
//                         <Input />
//                     </Form.Item>
//                     <Form.Item
//                         label="名称"
//                         name="shopName"
//                     >
//                         <Input />
//                     </Form.Item>
//                     <Form.Item
//                         label="籍贯"
//                         name="shopAddress"
//                     >
//                         <Input />
//                     </Form.Item>
//                     <Form.Item
//                         label="简述"
//                         name="shopDescription"
//                     >
//                         <Input />
//                     </Form.Item>
//                     <Form.Item
//                         label="图片"
//                         name="shopImage"
//                     >
//                         <Input />
//                     </Form.Item>
//                     <Form.Item label={null}>
//                         <Button type="primary" htmlType="submit">
//                             保存
//                         </Button>
//                     </Form.Item>
//                 </Form >
//             </Modal>
//         </div >
//     )
// }

// export default Index
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from 'react';
import { Button, Modal, Space, Table, Form, Input, message, Popconfirm } from 'antd';
import * as XLSX from 'xlsx';
import api from '../../api/request';
import useBtns from '../../hooks/useBtns';
import styles from '../../App.module.css';

// 定义商铺数据类型接口
interface ShopItem {
    id: number;
    shopName: string;
    shopAddress: string;
    shopDescription: string;
    shopImage: string;
}

// 定义搜索参数类型
interface SearchParams {
    searchValue: string;
    type: string;
}

function Index() {
    // 表单实例
    const [form] = Form.useForm();

    // 状态管理
    const [data, setData] = useState<ShopItem[]>([]);
    const [total, setTotal] = useState(0);
    const [page, setPage] = useState(1);
    const [size, setSize] = useState(10);
    const [search, setSearch] = useState<SearchParams>({
        searchValue: '',
        type: ''
    });
    const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [title, setTitle] = useState('');
    const [loading, setLoading] = useState(false);

    // 权限控制 - 保留原变量名
    const dele = useBtns('dele');
    const edit = useBtns('edit');

    // 表格列定义 - 保留原结构
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '名称',
            dataIndex: 'shopName',
            key: 'shopName',
        },
        {
            title: '籍贯',
            dataIndex: 'shopAddress',
            key: 'shopAddress',
        },
        {
            title: '简述',
            key: 'shopDescription',
            dataIndex: 'shopDescription',
        },
        {
            title: '图片',
            key: 'shopImage',
            dataIndex: 'shopImage',
            render: (text: string) => <img src={text} alt="商铺图片" style={{ width: '60px', borderRadius: '4px' }} />,
        },
        {
            title: '操作',
            render: (record: ShopItem) => (
                <Space size="middle">
                    {dele && (
                        <Popconfirm
                            title="确定要删除这条记录吗？"
                            onConfirm={() => del(record.id)}
                            okText="是"
                            cancelText="否"
                        >
                            <Button danger>删除</Button>
                        </Popconfirm>
                    )}
                    {edit && <Button onClick={() => edi(record)}>编辑</Button>}
                </Space>
            ),
        },
    ];

    // 获取数据 - 保留原函数名
    const getdata = async () => {
        try {
            setLoading(true);
            const res = await api.get('/list', {
                params: { pageCode: page, pageSize: size, ...search }
            });
            setData(res.data.data || []);
            setTotal(res.data.totalCount || 0);
        } catch (error) {
            message.error('获取数据失败，请重试');
            console.error('数据获取错误:', error);
        } finally {
            setLoading(false);
        }
    };

    // 初始化和依赖变化时获取数据
    useEffect(() => {
        getdata();
    }, [page, size, search]);

    // 分页变化处理 - 保留原函数名
    const change = (newPage: number, newSize: number) => {
        setPage(newPage);
        setSize(newSize);
    };

    // 选择行变化处理
    const onSelectChange = (newSelectedRowKeys: number[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };

    // 行选择配置
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    // 删除单条记录 - 保留原函数名
    const del = async (id: number) => {
        try {
            setLoading(true);
            await api.delete('/list', { params: { id } });
            message.success('删除成功');
            getdata();
            // 清除已删除项的选中状态
            setSelectedRowKeys(selectedRowKeys.filter(key => key !== id));
        } catch (error) {
            message.error('删除失败，请重试');
            console.error('删除错误:', error);
        } finally {
            setLoading(false);
        }
    };

    // 批量删除 - 保留原函数名
    const alldel = async () => {
        if (selectedRowKeys.length === 0) {
            message.warning('请先选择要删除的记录');
            return;
        }

        try {
            setLoading(true);
            await Promise.all(
                selectedRowKeys.map(id => api.delete('/list', { params: { id } }))
            );
            message.success('批量删除成功');
            setSelectedRowKeys([]);
            getdata();
        } catch (error) {
            message.error('批量删除失败，请重试');
            console.error('批量删除错误:', error);
        } finally {
            setLoading(false);
        }
    };

    // 搜索表单提交
    const onFinish = (values: SearchParams) => {
        setSearch(values);
        setPage(1); // 搜索时重置到第一页
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    // 打开编辑模态框 - 保留原函数名
    const edi = (record: ShopItem) => {
        setTitle('编辑');
        setIsModalOpen(true);
        form.setFieldsValue(record);
    };

    // 打开新增模态框 - 保留原函数名
    const add = () => {
        setTitle('新增');
        setIsModalOpen(true);
        form.resetFields();
    };

    // 保存表单数据（新增/编辑）- 保留原函数名
    const addFinish = async (values: ShopItem) => {
        try {
            setLoading(true);
            if (values.id) {
                await api.post('/list', values);
                message.success('更新成功');
            } else {
                await api.put('/list', values);
                message.success('新增成功');
            }
            setIsModalOpen(false);
            getdata();
        } catch (error) {
            message.error(values.id ? '更新失败' : '新增失败');
            console.error('保存错误:', error);
        } finally {
            setLoading(false);
        }
    };

    // 导出Excel - 保留原函数名
    const exp = () => {
        if (data.length === 0) {
            message.warning('没有数据可导出');
            return;
        }

        try {
            const exportData = data.map(item => ({
                ID: item.id,
                名称: item.shopName,
                籍贯: item.shopAddress,
                简述: item.shopDescription,
                图片地址: item.shopImage,
            }));

            const ws = XLSX.utils.json_to_sheet(exportData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
            XLSX.writeFile(wb, `商铺信息_${new Date().toLocaleDateString()}.xlsx`);
            message.success('导出成功');
        } catch (error) {
            message.error('导出失败，请重试');
            console.error('导出错误:', error);
        }
    };

    // 获取当前主题
    const getCurrentTheme = () => {
        return localStorage.getItem('them') || 'light';
    };

    return (
        <div>
            {/* 操作栏 */}
            <Form
                name="basic"
                layout="inline"
                style={{ maxWidth: 1000, marginBottom: 16 }}
                initialValues={search}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                {dele && (
                    <Form.Item label={null}>
                        <Popconfirm
                            title="确定要删除选中的记录吗？"
                            onConfirm={alldel}
                            okText="是"
                            cancelText="否"
                        >
                            <Button danger loading={loading}>
                                批量删除
                            </Button>
                        </Popconfirm>
                    </Form.Item>
                )}

                <Form.Item
                    label={<span className={getCurrentTheme() === 'dark' ? 'text-white' : 'text-black'}>关键词</span>}
                    name="searchValue"
                >
                    <Input placeholder="请输入搜索内容" />
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit" loading={loading}>
                        搜索
                    </Button>
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" onClick={add} loading={loading}>
                        新增
                    </Button>
                </Form.Item>

                <Form.Item label={null}>
                    <Button onClick={exp} loading={loading}>
                        导出Excel数据
                    </Button>
                </Form.Item>
            </Form>

            {/* 数据表格 - 保留原主题判断逻辑 */}
            {getCurrentTheme() === 'light' ? (
                <Table
                    className={styles.tablebox}
                    pagination={{
                        total,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        onChange: change,
                        showTotal: (total) => <p style={{ color: '#000' }}> 共{total}条记录</p>,
                        pageSizeOptions: ['10', '20', '50', '100']
                    }}
                    rowKey="id"
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={data}
                    loading={loading}
                    bordered
                />
            ) : (
                <Table
                    className={styles.tablebo}
                    pagination={{
                        total,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        onChange: change,
                        showTotal: (total) => <p style={{ color: '#fff' }}> 共{total}条记录</p>,
                        pageSizeOptions: ['10', '20', '50', '100']
                    }}
                    rowKey="id"
                    rowSelection={dele ? rowSelection : null}
                    columns={columns}
                    dataSource={data}
                    loading={loading}
                    bordered
                />
            )}

            {/* 新增/编辑模态框 */}
            <Modal
                title={title}
                open={isModalOpen}
                onCancel={() => setIsModalOpen(false)}
                footer={null}
                destroyOnClose={true}
            >
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    onFinish={addFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item style={{ display: 'none' }} name="id">
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="名称"
                        name="shopName"
                        rules={[{ required: true, message: '请输入名称' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="籍贯"
                        name="shopAddress"
                        rules={[{ required: true, message: '请输入籍贯' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="简述"
                        name="shopDescription"
                        rules={[{ required: true, message: '请输入简述' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="图片"
                        name="shopImage"
                        rules={[{ required: true, message: '请输入图片地址' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit" loading={loading}>
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default Index;
